<template>
  <main class="bg-white dark:bg-gray-900">

    <div class="relative flex">

      <!-- Content -->
      <div class="w-full md:w-1/2">
        <div class="min-h-[100dvh] h-full flex flex-col after:flex-1">

          <div class="flex-1">
            <div class="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
              <!-- Logo -->
              <router-link class="block" to="/">
                <svg class="fill-violet-500" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                  <path
                    d="M31.956 14.8C31.372 6.92 25.08.628 17.2.044V5.76a9.04 9.04 0 0 0 9.04 9.04h5.716ZM14.8 26.24v5.716C6.92 31.372.63 25.08.044 17.2H5.76a9.04 9.04 0 0 1 9.04 9.04Zm11.44-9.04h5.716c-.584 7.88-6.876 14.172-14.756 14.756V26.24a9.04 9.04 0 0 1 9.04-9.04ZM.044 14.8C.63 6.92 6.92.628 14.8.044V5.76a9.04 9.04 0 0 1-9.04 9.04H.044Z" />
                </svg>
              </router-link>
            </div>
          </div>

          <div class="w-full max-w-sm px-4 py-8 mx-auto">
            <h1 class="mb-6 text-3xl font-bold text-gray-800 dark:text-gray-100">Reset your Password</h1>
            <!-- Form -->
            <form>
              <div class="space-y-4">
                <div>
                  <label class="block mb-1 text-sm font-medium" for="email">Email Address <span
                      class="text-red-500">*</span></label>
                  <input id="email" class="w-full form-input" type="email" />
                </div>
              </div>
              <div class="flex justify-end mt-6">
                <button
                  class="text-gray-100 bg-gray-900 btn hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-800 dark:hover:bg-white whitespace-nowrap">Send
                  Reset Link</button>
              </div>
            </form>
          </div>

        </div>
      </div>

      <!-- Image -->
      <div class="absolute top-0 bottom-0 right-0 hidden md:block md:w-1/2" aria-hidden="true">
        <img class="object-cover object-center w-full h-full" src="../images/auth-image.jpg" width="760" height="1024"
          alt="Authentication" />
      </div>

    </div>

  </main>
</template>

<script setup lang="ts">
defineOptions({
  name: 'ResetPassword'
})
</script>